<template>
  <view class="container">
    <NavBar 
      title="登录" 
      :showBack="true"
    />
    <view class="page-content">
      <view class="form-container card">
        <view class="logo">
          <image src="/static/images/logo.png" mode="aspectFit" />
        </view>
        
        <view class="form-item">
          <input class="input" type="text" v-model="formData.username" placeholder="请输入用户名" />
        </view>
        
        <view class="form-item">
          <input class="input" type="password" v-model="formData.password" placeholder="请输入密码" />
        </view>
        
        <button class="button" @click="handleSubmit">登录</button>
        
        <view class="other-options">
          <text class="option" @click="handleRegister">注册账号</text>
          <text class="option" @click="handleForgetPassword">忘记密码</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import NavBar from '@/components/NavBar.vue'

interface FormData {
  username: string
  password: string
}

const formData = ref<FormData>({
  username: '',
  password: ''
})

const handleSubmit = () => {
  // TODO: Implement sign in logic
}

const handleRegister = () => {
  uni.navigateTo({
    url: '/pages/register/index'
  })
}

const handleForgetPassword = () => {
  uni.navigateTo({
    url: '/pages/forget-password/index'
  })
}
</script>

<style lang="scss">
@use '@/uni.scss' as *;

.container {
  min-height: 100vh;
  background-color: $background-color;
  padding-top: 200rpx;
}

.page-content {
  padding: $spacing-sm;
  height: calc(100vh - 200rpx);
  overflow-y: auto;
}

.form-container {
  padding: $spacing-xl;
  
  .logo {
    width: 200rpx;
    height: 200rpx;
    margin: 0 auto $spacing-lg;
    
    image {
      width: 100%;
      height: 100%;
    }
  }
  
  .form-item {
    margin-bottom: $spacing-base;
    
    .input {
      width: 100%;
      height: 88rpx;
      background-color: $background-color;
      border-radius: $border-radius-lg;
      padding: 0 $spacing-base;
      font-size: $font-size-base;
    }
  }
  
  .other-options {
    display: flex;
    justify-content: space-between;
    margin-top: $spacing-base;
    
    .option {
      font-size: $font-size-base;
      color: $primary-color;
    }
  }
}
</style>